<template>
  <div class="app-flex app-fill">
    <div class="app-width-50p app-hv-center">
      <div style="width: 80%;height: 66%" class="app-hv-center">
        <div id="chart-l" class="app-fill" />
      </div>
    </div>
    <div class="app-width-50p app-hv-center">
      <div style="width: 80%;height: 66%" class="app-hv-center">
        <div id="chart-r" class="app-fill" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getQuestionStatistics,getOrderStatistics } from '@/api/question'
export default {
  data() {
    const nowDate = new Date(new Date() + 8 * 3600 * 1000)
    return {
      dates: [new Date(nowDate.getFullYear(), parseInt(nowDate.getMonth()), 1), nowDate],
      lineChart: null,
      pieChar: null,
      noDataL: true,
      noDataR: true,
      type: 1 // 1今日2本周3本月
    }
  },
  mounted() {
    this.getLineData()
    this.getPieData()
  },
  beforeDestroy() {
    window.removeEventListener('resize',this.lineChart.resize)
  },
  methods: {
    getPieData() {
      getQuestionStatistics({ type: this.type }).then(res => {
        if (res.code === 200) {
          this.$message.success('数据已加载！')
          if (!res.data) {
            this.noDataR = true
          } else {
            this.noDataR = false
            this.initPieChart(res.data)
          }
        }
      })
    },
    initPieChart(data) {
      this.pieChar = echarts.init(document.getElementById('chart-r'))
      this.pieChar.setOption(this.getPieOption(data))
      window.addEventListener('resize', this.pieChar.resize)
    },
    getPieOption(data) {
      return {
        tooltip: {
          trigger: 'item'
        //   formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['发布问题数量', '回答数量']
        },
        color: ['#1689fe', '#cd9d9d', '#8c79fe', '#90c5ed', '#bfc078'], // 自定义颜色
        series: [
          {
            name: '访问来源',
            type: 'pie',
            minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            radius: ['30%', '70%'],
            center: ['48%', '58%'],
            label: {
            //   formatter: '{b|{b}}\n（{c}%）\n', // 这里的设置就是饼图的标签内容及其格式
              rich: {
                b: {
                  align: 'center'
                }
              }
            },
            data: [
              { value: data.answerCount || 0, name: '回答数量' },
              { value: data.questionCount || 0, name: '发布问题数量' }
            ]
          }
        ]
      }
    },
    getLineData() {
      getOrderStatistics({
        beginTime: this.dates[0],
        endTime: this.dates[1]
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success('数据已加载！')
          if (!res.data.length) {
            this.noDataL = true
          } else {
            this.noDataL = false
            this.initLineChart(res.data)
          }
        }
      })
    },
    initLineChart(data) {
      this.lineChart = echarts.init(document.getElementById('chart-l'))
      this.lineChart.setOption(this.getLineOption(data))
      window.addEventListener('resize', this.lineChart.resize)
    },
    getLineOption(data) {
      return {
        title: {
          text: '本周交易额'
        },
        tooltip: {
          // trigger: 'axis',
          axisPointer: {
            // type: 'shadow',
            label: {
              show: true
            }
          }
        },
        calculable: true,
        legend: {
          data: ['今日回答问题交易金额', '今日充值金额','今日发布答题消费金额'],
          itemGap: 5
        },
        grid: {
          top: '90',
          left: '1%',
          right: '5%',
          bottom: 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              rotate: 90
            },
            data: data.map(v => v.time) || []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总收入/元'
            // axisLabel: {
            //   formatter: function(a) {
            //     a = +a
            //     return isFinite(a) ? echarts.format.addCommas(+a / 1000) : ''
            //   }
            // }
          }
        ],
        series: [
          {
            itemStyle: {
              normal: {
                label: { show: true },
                color: '#2e4555'
              }
            },
            name: '今日回答问题交易金额',
            type: 'line',
            barMaxWidth: 50,
            data: data.map(v => v.answereBalance) || []
          },
          {
            itemStyle: {
              normal: {
                label: { show: true },
                color: '#FB7299'
              }
            },
            name: '今日充值金额',
            type: 'line',
            barMaxWidth: 50,
            data: data.map(v => v.rechargeBalance) || []
          },
          {
            itemStyle: {
              normal: {
                label: { show: true },
                color: '#4887BD'
              }
            },
            name: '今日发布答题消费金额',
            type: 'line',
            barMaxWidth: 50,
            data: data.map(v => v.releaseBalance) || []
          }
        ]
      }
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
